<script setup>
import { ref, reactive } from "vue";
import axios from "@/http";
import { ElMessage, ElNotification } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

let dialogVisible = ref(false); //弹框显示或隐藏
let dialogImageUrl = ref(""); //放大图片路径
const form = reactive({
  name: "",
  file: "",
});
//列表默认
// const fileList = ref([
//   {
//     name:'VUE全家桶',
//     url:'/src/assets/vue.svg'
//   }
// ])

//自定义上传
const uploadFile = (v) => {
  console.log(v.file);
  //缓存
  form.file = v.file;
};
//超出限制后的提示
const uploadExceed = () => {
  ElMessage.warning("已超出最大文件数！");
};
//上传文件前的钩子,校验类型以及大小
const beforeUpload = (file) => {
  console.log(file);
  //类型
  const isJPG = file.type === "image/jpeg";
  //大小
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isJPG) {
    ElMessage.warning("上传的图片格式只能是JPG格式！");
  }
  if (!isLt2M) {
    ElMessage.warning("上传的图片大小不能超过2M！");
  }
  return isJPG && isLt2M;
};
//文件列表移除
const uploadRemove = () => {
  alert("是否移除？");
};
//文件列表单击时的钩子
const uploadPreview = (file) => {
  dialogVisible.value = true; //弹框显示
  dialogImageUrl.value = file.url;
};
//文件提交
const onSubmit = async () => {
  console.log(form);
  //数据交互
  let formdata = new FormData();
  formdata.append("name", form.name);
  formdata.append("file", form.file);
  //axios
  let { data } = await axios.post("upload/create", formdata, {
    headers: { "Content-type": "multipart/form-data" },
  });
  if (data.code === 20000) {
    ElNotification({
      title: "上传成功",
      message: "上传成功",
      duration: 2000,
      type: "success",
    });
  }
};
</script>

<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>单文件上传</span>
        </div>
      </template>
      <el-form :model="form" label-width="120px">
        <el-form-item label="文件名称">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="上传文件">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action=""
            :http-request="uploadFile"
            :limit="2"
            :on-exceed="uploadExceed"
            :before-upload="beforeUpload"
            :on-remove="uploadRemove"
            :on-preview="uploadPreview"
            accept=".jpg"
            list-type="picture-card"
          >
            <!-- <el-button type="primary">Click to upload</el-button>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500KB.
            </div>
          </template> -->
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-dialog v-model="dialogVisible">
      <img
        w-full
        :src="dialogImageUrl"
        alt="Preview Image"
        style="max-width: 100%"
      />
    </el-dialog>
  </div>
</template>

<style scoped></style>
